<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <base href="${APP_PATH}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>考勤情况</title>
    <link rel="icon" href="public/favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <jsp:include page="/commons.jsp"></jsp:include>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <jsp:include page="/menu.jsp"></jsp:include>

        <!--End 左侧导航-->

        <!--头部信息-->
        <jsp:include page="/head.jsp"></jsp:include>

        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <div class="col-lg-2">
                                    <select class="form-control" type="text" id="year" name="year" value=""
                                            onchange="changeYear()"/>

                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <select class="form-control" type="text" id="quarter" name="quarter" value=""/>
                                    <option value="">季度</option>
                                    <option value="1">一季度</option>
                                    <option value="2">二季度</option>
                                    <option value="3">三季度</option>
                                    <option value="4">四季度</option>
                                    </select>
                                </div>

                                <div class="col-lg-2">
                                    <select class="form-control" type="text" id="month" name="month" value=""
                                            onchange="changeMonth()"/>
                                    <option value="">月份</option>
                                    <option value="1">一月</option>
                                    <option value="2">二月</option>
                                    <option value="3">三月</option>
                                    <option value="4">四月</option>
                                    <option value="5">五月</option>
                                    <option value="6">六月</option>
                                    <option value="7">七月</option>
                                    <option value="8">八月</option>
                                    <option value="9">九月</option>
                                    <option value="10">十月</option>
                                    <option value="11">十一月</option>
                                    <option value="12">十二月</option>
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <select class="form-control" type="text" id="week" name="week" value=""/>


                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <input class="form-control js-datepicker m-b-10" type="text" id="day" name="day"
                                           data-date-format="yyyy/mm/dd" placeholder="请选择查询日期">
                                </div>
                                <div class="col-lg-2">
                                    <select class="form-control" type="text" id="classmanager" name="classmanager"
                                            value=""/>


                                    </select>
                                </div>

                            </div>

                            <button class="btn btn-primary btn-block" id="search" type="button">查询</button>


                        </div>
                    </div>
                    <div class="card-body">
                        <div class="card-header"><h4 id="title">全部班级考勤率</h4></div>
                        <div class="col-lg-12" id="showBody" align="center">

                        </div>
                    </div>

                </div>

            </div>

    </div>

    </main>
    <!--End 页面主要内容-->
</div>
</div>


<!--日期选择插件-->
<script src="public/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="public/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- 图 -->
<script type="text/javascript" src="public/js/Chart.js"></script>
<script type="text/javascript">

    function changeYear() {
        <!-- start 填充周下拉框 -->
        $("#week").empty();
        let weekHtml = "<option value=''>选择周</option>";
        for (let i = 1; i <= getWeeks($("#year").val(), $("#month").val()); i++) {
            weekHtml += "<option value='" + i + "'>第" + i + "周</option>";
        }

        $("#week").html(weekHtml);
        <!-- end 填充周下拉框 -->
    }

    function changeMonth() {
        <!-- start 填充周下拉框 -->
        $("#week").empty();
        let weekHtml = "<option value=''>选择周</option>";
        for (let i = 1; i <= getWeeks($("#year").val(), $("#month").val()); i++) {
            weekHtml += "<option value='" + i + "'>第" + i + "周</option>";
        }
        $("#week").html(weekHtml);
        <!-- end 填充周下拉框 -->
    }


    $(function () {

        <!-- start 填充年份下拉表 -->
        var date = new Date();
        $("#year").empty();
        let yearHtml = "<option value=''>选择年份</option>";
        for (var i = 1970; i <= 2100; i++) {
            if (i == date.getFullYear()) {
                yearHtml += "<option selected value='" + i + "'>" + i + "</option>";
            } else {
                yearHtml += "<option value='" + i + "'>" + i + "</option>";
            }

        }
        $("#year").html(yearHtml);
        <!-- end 填充年份下拉表 -->

        <!-- start 首次填充周下拉框 -->
        $("#week").empty();
        let weekHtml = "<option value=''>选择周</option>";
        for (let i = 1; i <= getWeeks($("#year").val(), $("#month").val()); i++) {
            weekHtml += "<option value='" + i + "'>第" + i + "周</option>";
        }
        $("#week").html(weekHtml);
        <!-- end 首次填充周下拉框 -->


        <!-- start 自带 -->
        $('.search-bar .dropdown-menu a').click(function () {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
        <!-- end 自带 -->


        //多条件分页查询
        var examplesMap = "";
        $("#search").click(function () {
            //年份
            var yearVal = $("#year").val();
            //季度
            var quarterVal = $("#quarter").val();
            //月份
            var monthVal = $("#month").val();
            //周
            var weekVal = $("#week").val();
            //天
            var dayVal = $("#day").val();
            //老师
            var classmanagerVal = $("#classmanager").val();

            if(weekVal != "" && monthVal == ""){
                layer.msg("按照周查询月份不能为空", {time:1000, icon:5, shift:6}, function () {

                });
                return;
            }

            examplesMap = {
                "year": yearVal,
                "quarter": quarterVal,
                "month": monthVal,
                "week": weekVal,
                "day": dayVal,
                "classmanager": classmanagerVal
            };
            examplesMap = JSON.stringify(examplesMap);
            layer.msg("加载中", {time: 200, icon: 16, shift: 5}, function () {
                goPage("1", examplesMap);
            });//layer
        });//多条件分页查询

        //点击page跳转页面
        $(document).on("click", ".page", function (event) {
            let page = $(this).attr("data-page");
            layer.msg("加载中", {time: 200, icon: 16, shift: 5}, function () {
                goPage(page, examplesMap);
            });//layer
        })//点击page跳转页面

        //进入页面展示学员考勤表
        layer.msg("加载中", {time: 200, icon: 16, shift: 5}, function () {

            goPage("1", "");
        });//layer


    });//入口


    function goPage(pageNum, examplesMap) {
        $.ajax({
            url: "attendance/listAttendanceByCmid",
            data: {"uid": "${loginUser.uid}", "pageNum": pageNum, "examplesMap": examplesMap},
            dataType: "json",
            type: "post",
            success: function (result) {

                if (result.result) {

                    let cmid = 0;
                    if (result.classmanager != null) {
                        cmid = result.classmanager.uid;
                        $("#title").text(result.classmanager.uname + "所带班级的出勤率");
                    }

                    $("#classmanager").empty();
                    let classmanagerHtml = "<option value=''>选择班主任</option>";
                    $.each(result.classManagers, function (index, obj) {
                        if (cmid == obj.uid) {
                            classmanagerHtml += "<option selected value='" + obj.uid + "'>" + obj.uname + "</option>";
                        } else {
                            classmanagerHtml += "<option value='" + obj.uid + "'>" + obj.uname + "</option>";
                        }
                    })//each
                    $("#classmanager").html(classmanagerHtml);


                    <!-- start detailBtn 点击显示饼图模态框 -->
                    var normal = 0;
                    var late = 0;
                    var vacate = 0;
                    var snumber = "";
                    var sname = "";

                    //每次点击重新添加；画布，即可避免产生每点击一次显示文本变小
                    var bodyHtml = ' <canvas id="chart-doughnut" width="400" height="400"></canvas>';
                    $("#showBody").html(bodyHtml);

                    new Chart($("#chart-doughnut"), {
                        type: 'doughnut',
                        data: {
                            labels: ["迟到", "正常", "请假"],
                            datasets: [{
                                data: [result.attendance.late - 0, result.attendance.normal - 0, result.attendance.vacate - 0],
                                backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)']
                            }]
                        },
                        options: {
                            responsive: false,
                            animateRotate: true
                        }
                    });//new chart


                    <!-- end detailBtn 点击显示饼图模态框 -->
                } else {
                    layer.msg("信息加载失败：" + result.msg, {time: 1000, icon: 5, shift: 6}, function () {

                    });
                }

            }//success
        });//ajax
    }//gopage

    <!-- start 获得当前月份有几周 -->
    function getWeeks(year, month) {
        var d = new Date();
        // 该月第一天
        d.setFullYear(year, month - 1, 1);
        var w1 = d.getDay();
        if (w1 == 0) w1 = 7;
        // 该月天数
        d.setFullYear(year, month, 0);
        var dd = d.getDate();
        // 第一个周一
        let d1;
        if (w1 != 1) d1 = 7 - w1 + 2;
        else d1 = 1;
        let week_count = Math.ceil((dd - d1 + 1) / 7);
        return week_count;
    }

    <!-- end 获得当前月份有几周 -->
</script>
</body>
</html>
